<template>
    <view class="input" type="text" placeholder="请选择地区">
        <picker mode="multiSelector"
                :range="newProvinceDataList"
                :value="multiIndex"
                @change="pickerChange"
                @columnchange="pickerColumnChange">
            <view>{{ select }}</view>
        </picker>
    </view>
</template>

<script>
import provinceData from "../common/jsonData/provinceData";
import pubsub from "pubsub-js";

export default {
    name: "ProvincePicker",
    props: ["city", "province", "district"],
    data() {
        return {
            oldProvinceDataList: provinceData.data,
            newProvinceDataList: [
                [], [], []
            ],
            multiIndex: [0, 0, 0],
            select: "选择省市区",
        }
    },
    methods: {
        /**
         * @description 加载地区数据
         * @author 十一
         * @date 2022-12-01 21:44
         */
        showProvinceData() {
            for (let i = 0; i < this.oldProvinceDataList.length; i++) {
                this.newProvinceDataList[0].push(this.oldProvinceDataList[i].name);
            }
            for (let i = 0; i < this.oldProvinceDataList[0].city.length; i++) {
                this.newProvinceDataList[1].push(this.oldProvinceDataList[0].city[i].name);
            }
            for (let i = 0; i < this.oldProvinceDataList[0].city[0].area.length; i++) {
                this.newProvinceDataList[2].push(this.oldProvinceDataList[0].city[0].area[i]);
            }
        },
        /**
         * @description: 省市区确认事件
         * @param e
         * @author 十一
         * @date 2022-12-01 22:12
         */
        pickerChange(e) {
            this.multiIndex = e.detail.value;
            this.select = `${this.newProvinceDataList[0][this.multiIndex[0]]}-${this.newProvinceDataList[1][this.multiIndex[1]]}-${this.newProvinceDataList[2][this.multiIndex[2]]}`;
            // console.log(this.select);  // 最终确认数据
            let data = this.select.split("-");
            /**
             * 发布消息
             */
            pubsub.publish("pickerChange", data);
        },
        /**
         * @description 省市区滑动选择事件
         * @param e
         * @author 十一
         * @date 2022-12-01 21:55
         */
        pickerColumnChange(e) {
            // console.log(e.detail.column);  // 第几列滑动
            // console.log(e.detail.value);  // 第几列滑动的下标
            // 第一列滑动
            if (e.detail.column === 0) {
                this.multiIndex[0] = e.detail.value;
                // this.newProvinceDataList[1] = [];  // 第一列滑动
                this.newProvinceDataList[1] = this.oldProvinceDataList[this.multiIndex[0]].city.map((item) => {
                    return item.name;
                });
                if (this.oldProvinceDataList[this.multiIndex[0]].city.length === 1) {
                    this.newProvinceDataList[2] = this.oldProvinceDataList[this.multiIndex[0]].city[0].area.map((item) => {
                        return item;
                    });
                } else {
                    this.newProvinceDataList[2] = this.oldProvinceDataList[this.multiIndex[0]].city[this.multiIndex[1]].area.map((item) => {
                        return item;
                    });
                }
                // 第一列滑动，第二列和第三列都变为第一个
                this.multiIndex.splice(1, 1, 0);
                this.multiIndex.splice(2, 1, 0);
            }
            // 第二列滑动
            if (e.detail.column === 1) {
                // this.multiIndex[1] = e.detail.value;
                // console.log(this.multiIndex);
                this.newProvinceDataList[2] = this.oldProvinceDataList[this.multiIndex[0]].city[this.multiIndex[1]].area.map((item) => {
                    return item;
                });
                // 第二列滑动，第三列变成第一个
                this.multiIndex.splice(2, 1, 0);
            }
            // 第三列滑动
            if (e.detail.column === 2) {
                this.multiIndex[2] = e.detail.value;
                // console.log(this.multiIndex);
            }
        },
    },
    mounted() {
        this.showProvinceData();
        if (this.city != null && this.province != null && this.district != null) {
            this.select = this.city + "-" + this.province + "-" + this.district;
        }
    },
}
</script>

<style scoped lang="less">

</style>